<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span style="border-left: 6px solid #409eff; padding-left: 8px">我的信息</span>
      </div>
      <!-- 头像部分 -->
      <div>
        <div class="img-box">
          <div
            style="
              width: 120px;
              height: 120px;
              border-radius: 50%;
              border: 3px solid #606266;
              display: inline-flex;
              justify-content: center;
              align-items: center;
            "
          >
            <div class="image-slot">
              <img :src="fullImageUrl()" class="avatar" />
            </div>
          </div>
        </div>
        <div class="up-btn-box">
          <!-- 头像上传组件 -->
          <el-upload
            class="avatar-uploader"
            action
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
          >
            <el-button size="small" type="primary">
              <i class="el-icon-plus avatar-uploader-icon"></i>上传头像
            </el-button>
          </el-upload>
        </div>
      </div>
      <el-divider></el-divider>
      <!-- 用户名性别信息 -->
      <div>
        <div>
          <el-row type="flex" align="middle">
            <el-col :span="2">
              <span>用户名：</span>
            </el-col>
            <el-col :span="18">
              <span>{{ userInfo.username }}</span>
            </el-col>
          </el-row>
        </div>
        <div style="margin-top: 10px">
          <div v-if="!(isEditing === 'sex')">
            <el-row type="flex" align="middle">
              <el-col :span="2">
                <span>性别：</span>
              </el-col>
              <el-col :span="19">
                <span>
                  {{
                  userInfo.sex === "1"
                  ? "男"
                  : userInfo.sex === "0"
                  ? "女"
                  : userInfo.sex === "2"
                  ? "保密"
                  : "未设置"
                  }}
                </span>
              </el-col>
              <el-col :span="3">
                <el-button @click="isEditing = 'sex'">编辑</el-button>
              </el-col>
            </el-row>
          </div>
          <div v-else>
            <el-row type="flex" align="middle">
              <el-col :span="2">
                <span>性别:</span>
              </el-col>
              <el-col :span="19">
                <el-radio-group v-model="userInfo.sex">
                  <el-radio label="1" border>男</el-radio>
                  <el-radio label="0" border>女</el-radio>
                  <el-radio label="2" border>保密</el-radio>
                </el-radio-group>
              </el-col>
              <el-col :span="2">
                <el-button type="primary" @click="saveSex" style>保存</el-button>
              </el-col>
              <el-col :span="1">
                <el-button @click="cancelEdit" style="float: right">取消</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <!-- 账号绑定部分 -->
      <div>
        <div style="width: 100%; height: 80px; border: 2px solid #c0c4cc">
          <el-row type="flex" align="middle">
            <el-col :span="1">
              <div style="margin-left: 10px">
                <el-result icon="success" style="width: 55px; height: 55px" />
              </div>
            </el-col>
            <el-col :span="3">
              <span style="font-weight: bold; font-size: 18px; margin-left: 30px">登录密码</span>
            </el-col>
            <el-col :span="17">
              <span style="float: left">******</span>
            </el-col>
            <el-col :span="3">
              <el-button type="type" @click="openDig('pwa')">修改密码</el-button>
            </el-col>
          </el-row>
        </div>
        <div
          style="
            width: 100%;
            height: 80px;
            border: 2px solid #c0c4cc;
            margin-top: 5px;
          "
        >
          <el-row type="flex" align="middle">
            <el-col :span="1">
              <div style="margin-left: 10px">
                <el-result
                  v-if="userInfo.phone != ''"
                  icon="success"
                  style="width: 55px; height: 55px"
                />
                <el-result v-else icon="warning" style="width: 55px; height: 55px" />
              </div>
            </el-col>
            <el-col :span="3">
              <span style="font-weight: bold; font-size: 18px; margin-left: 30px">绑定手机</span>
            </el-col>
            <el-col :span="17">
              <span>{{ filterPhone(userInfo.phone) }}</span>
            </el-col>
            <el-col :span="3">
              <el-button type="type" @click="openDig('phone')">更换手机</el-button>
            </el-col>
          </el-row>
        </div>
        <div
          style="
            width: 100%;
            height: 80px;
            border: 2px solid #c0c4cc;
            margin-top: 5px;
          "
        >
          <el-row type="flex" align="middle">
            <el-col :span="1">
              <div style="margin-left: 10px">
                <el-result
                  v-if="
                    !isNullOrEmpty(userInfo.name) &&
                    !isNullOrEmpty(userInfo.idNumber)
                  "
                  icon="success"
                  style="width: 55px; height: 55px"
                />
                <el-result v-else icon="warning" style="width: 55px; height: 55px" />
              </div>
            </el-col>
            <el-col :span="3">
              <span style="font-weight: bold; font-size: 18px; margin-left: 30px">实名认证</span>
            </el-col>
            <el-col :span="17">
              <span
                v-if="
                  isNullOrEmpty(userInfo.name) &&
                  isNullOrEmpty(userInfo.idNumber)
                "
              >未认证</span>
              <span v-else>已认证</span>
            </el-col>
            <el-col :span="3">
              <div
                v-show="
                  isNullOrEmpty(userInfo.name) &&
                  isNullOrEmpty(userInfo.idNumber)
                "
              >
                <el-button @click="openDig('idCard')">去认证</el-button>
              </div>
              <div
                v-show="
                  !isNullOrEmpty(userInfo.name) &&
                  !isNullOrEmpty(userInfo.idNumber)
                "
              >
                <el-button disabled>已认证</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
    <el-dialog
      :title="title()"
      :visible.sync="dialogVisible"
      width="40%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <modify-pwa v-if="isShowCom === 'pwa'" @my-event="cancelDig" :phoneX="userInfo.phone"></modify-pwa>
      <bind-phone v-else-if="isShowCom === 'phone'" @my-event="cancelDig" :phoneX="userInfo.phone"></bind-phone>
      <real-name-aut v-else-if="isShowCom === 'idCard'" @my-event="cancelDig"></real-name-aut>
    </el-dialog>
  </div>
</template>

<script>
import ModifyPwa from "./ModifyPwa.vue";
import BindPhone from "./BindPhone.vue";
import RealNameAut from "./RealNameAut.vue";

export default {
  components: {
    ModifyPwa,
    BindPhone,
    RealNameAut,
  },
  data() {
    return {
      dialogVisible: false,
      isEditing: "", //编辑按钮切换
      isShowCom: "",
      userInfo: {},
    };
  },
  methods: {
    // 修改用户信息
    async modifyUser() {
      // 在这里提交表单
      await this.$axios
        .put("/api/user/modify", this.userInfo)
        .then((res) => {
          if (res.data.code === 1) {
            this.userInfo = res.data.data;
            this.$message.success(res.data.msg);
          } else if (res.data.code === 0) {
            this.$message.error(res.data.msg);
          }
        })
        .catch((error) => {
          // 处理请求失败的错误
          this.$message.error(error.response.data.msg);
        });
    },
    // 查询用户信息
    async selUserInfo() {
      // 在这里提交表单
      await this.$axios.post("/api/user/selUser").then((res) => {
        if (res.data.code === 1) {
          this.userInfo = res.data.data;
        } else if (res.data.code === 0) {
        }
      });
    },
    // 打开弹窗
    openDig(value) {
      this.isShowCom = value;
      this.dialogVisible = true;
    },
    // 取消弹窗
    cancelDig(value, msg) {
      this.dialogVisible = value;
      if (msg === "succ") {
        this.selUserInfo();
      }
    },
    //更改性别
    saveSex() {
      this.isEditing = " ";
      this.modifyUser();
    },
    //取消编辑性别
    cancelEdit() {
      this.isEditing = "";
    },
    title() {
      if (this.isShowCom === "pwa") {
        return "修改密码";
      } else if (this.isShowCom === "phone") {
        return "更换手机号";
      } else if (this.isShowCom === "idCard") {
        return "实名认证";
      }
    },
    //判断是否为空或null
    isNullOrEmpty(str) {
      return str == null || str.trim() === "";
    },
    // 手机号过滤
    filterPhone(value) {
      return value.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
    },
    //处理头像
    fullImageUrl() {
      if (this.isNullOrEmpty(this.userInfo.avatar)) {
        return require(`@/assets/noImg.png`);
      }
      return require(`@/assets/${this.userInfo.avatar}`); // 拼接完整的图片地址
    },
    // 头像上传前的验证函数
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return false;
      }
      this.userInfo.avatar = file.name;
      this.modifyUser();

      return true;
    },
  },
  created() {
    //接收组件传过来的值
    const a = localStorage.getItem("userToken");
    if (a) {
      this.selUserInfo();
    }
  },
};
</script>

<style scoped>
/* 卡片样式 */
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

/* 头像样式 */
.img-box {
  width: 100%;
  display: inline-flex;
  justify-content: center;
}
.up-btn-box {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  margin-top: 10px;
}
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.avatar-uploader {
  width: 100px;
  text-align: center;
}
</style>